<template>
    <div class="newsinfo-box">
        <!--巨幕-->
        <div class="jumbotron">
            <img src="../../assets/images/news/news/banner.png" alt="">
        </div>

        <div class="container nc-container">
            <!--面包屑导航-->
            <Breadcrumb separator="<">
                <BreadcrumbItem to="/">蜀帅首页</BreadcrumbItem>
                <BreadcrumbItem to="/news">新闻资讯</BreadcrumbItem>
                <BreadcrumbItem style="font-size: 18px;font-weight: normal;cursor: pointer">{{ nowPage }}
                </BreadcrumbItem>
            </Breadcrumb>

            <!--文章部分-->
            <article class="newsinfo-content">
                <!--文章标题-->
                <div class="nc-title">
                    加盟麻辣香锅加盟总店要注意服务问题
                </div>

                <!--来源、时间等-->
                <div class="nc-info">
                    <span class="nc-info-time">时间：2019/01/20</span>
                    <span class="nc-info-from">来源：蜀帅公众号</span>
                </div>

                <!--文章内容-->
                <div class="nc-content">
                    <p>
                        第一点，就是提供一些简单的培训服务，因为加盟餐饮连锁品牌，我们需要去学习相关的技术，在这个时候就需要麻辣香锅加盟连锁总部提供一定的培训，但是不同的餐饮连锁加盟品牌提供的培训是不一样的，我们选择正宗麻辣香锅加盟品牌的时候，一定要注意它是否提供一些实地培训项目。</p>
                    <img src="../../assets/images/news/newsinfo/news_img.png" alt="">
                    <p>
                        其二我们就是要看它是否给我们提供一些选址服务，因为不同的麻辣香锅加盟总店，它对地段的要求是不一样的，我们在选择的时候也需要看一下这个菜加盟品牌它的地段要求高不高，因为比如肯德基麦当劳这样的快餐加盟品牌，它对地段的要求非常之高。总部是否提供一个退换货的服务，这个问题也是非常重要的，注意到了这些细节问题，相信大家也能找到真正合适的麻辣香锅加盟总店。</p>
                </div>

                <!--分享-->
                <div class="nc-share">
                    <span>分享到：</span>
                    <span class="wx hidden-sm hidden-xs"></span>
                    <span class="qq hidden-sm hidden-xs"></span>
                    <span class="wb hidden-sm hidden-xs"></span>
                    <span class="wx iconfont hidden-md hidden-lg">&#xe7de;</span>
                    <span class="qq iconfont hidden-md hidden-lg">&#xe676;</span>
                    <span class="wb iconfont hidden-md hidden-lg">&#xe67b;</span>
                </div>

                <!--横线-->
                <div class="nc-hx"></div>

                <!--热门标签-->
                <div class="nc-hot">
                    <!--标题提示-->
                    <div class="nc-hot-title">
                        热门标签
                    </div>
                    <!--按钮区域-->
                    <!--<Button type="info">实地考察</Button>-->
                    <!--<Button type="success">加盟费用</Button>-->
                    <!--<Button type="warning">加盟前景</Button>-->
                    <!--<Button type="error">加盟须知</Button>-->
                    <Button :style="{'background-color': buttonBgc}" v-for="(item,index) in hotData" :key="index">{{
                        item }}
                    </Button>
                </div>

                <!--精选文章区域-->
                <div class="nc-selected">
                    <!--标题提示-->
                    <div class="nc-selected-title">
                        精选文章
                    </div>
                    <!--文章列表-->
                    <ul class="row nc-selected-list">
                        <li class="col-md-6 col-sm-12" v-for="(item,index) in selectedData" :key="index">
                            {{ item.title | slh(17) }}
                        </li>
                    </ul>
                </div>
            </article>
        </div>

        <commonFooter></commonFooter>

    </div>
</template>

<script>
    import commonFooter from "@/components/footerCom/commonFooter"

    export default {
        name: "newsinfo",
        data() {
            return {
                nowPage: "行业资讯",
                // 模拟热门标签数据
                hotData: ["实地考察", "加盟费用", "加盟前景", "加盟须知"],
                // 热门标签的背景颜色（随机）
                buttonBgc: "",
                // 模拟精选文章数据
                selectedData:[
                    {id:1,title:"麻辣香锅加盟 在餐饮业的前景怎么样？麻辣香锅加盟 在餐饮业的前景怎么样？麻辣香锅加盟 在餐饮业的前景怎么样？麻辣香锅加盟 在餐饮业的前景怎么样？"},
                    {id:2,title:"酸菜鱼加盟 在餐饮业的前景怎么样？"},
                    {id:3,title:"黄焖鸡加盟 在餐饮业的前景怎么样？"},
                    {id:4,title:"煲仔饭加盟 在餐饮业的前景怎么样？"},
                    {id:5,title:"炸鸡加盟 在餐饮业的前景怎么样？"},
                    {id:6,title:"粥加盟 在餐饮业的前景怎么样？"},
                ]
            }
        },
        methods: {
            // 得到随机数
            getRandomNum(min, max) {
                // 随机数
                var min = Math.ceil(min),
                    max = Math.floor(max),
                    randomNum = Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
                return randomNum
            },
            // 随机颜色的函数
            getColor() {
                var r = this.getRandomNum(0, 255);
                var g = this.getRandomNum(0, 255);
                var b = this.getRandomNum(0, 255)
                var randomColor = "rgb(" + r + "," + g + "," + b + ")"
                // console.log(randomColor)
                // return randomColor
                this.buttonBgc = randomColor
            }
        },
        created() {
            // this.getColor()
        },
        mounted() {
            this.getColor()
        },
        components:{
            commonFooter
        }
    }
</script>

<style lang="less">
    /* 新闻详情页盒子 */
    .newsinfo-box {
        /*巨幕*/

        .jumbotron {
            width: 100%;
            padding: 0;
            margin: 0;

            img {
                width: 100%;
                display: block;
            }
        }

        @media (max-width: 768px) {
            .jumbotron {
                img {
                    /*width: 33%;*/
                }
            }
        }

        /*面包屑的样式修改*/
        @media (min-width: 992px) {
            .ivu-breadcrumb {
                margin-top: 48px;
                margin-bottom: 32px;
            }
        }
        @media (max-width: 768px) {
            .ivu-breadcrumb {
                margin-top: 10px;
                margin-bottom: 10px;
            }
        }

        .ivu-breadcrumb {
            > span {
                a {
                    font-size: 16px;

                    &:hover {
                        color: #505050 !important;
                    }
                }

                span {
                    color: #505050;
                    font-size: 13px;
                }

                &:nth-of-type(3) {
                    span {
                        font-size: 16px;
                    }
                }
            }
        }

        /*文章内容*/

        /*pc样式*/
        @media (min-width: 992px) {
            .newsinfo-content {
                background-color: #ffffff;
                box-shadow: 0px 14px 62px 0px rgba(76, 76, 76, 0.32);
                padding: 60px 90px;

                /*标题*/

                .nc-title {
                    font-size: 26px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 3px;
                    color: #222222;
                    text-align: center;
                }

                /*时间、来源等*/

                .nc-info {
                    margin-top: 30px;
                    margin-bottom: 49px;
                    text-align: center;
                    /*时间*/

                    span {
                        font-size: 16px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 14px;
                        letter-spacing: 0.1em;
                        color: #666666;
                    }

                    .nc-info-time {
                        margin-right: 33px;
                    }

                    /*来源*/

                    .nc-info-from {

                    }
                }

                /*文章内容*/

                .nc-content {
                    p {
                        font-size: 16px;
                        line-height: 36px;
                        color: #333;
                        letter-spacing: 0.1em;
                    }

                    img {
                        width: 720px;
                        height: 240px;
                        display: block;
                        margin: 0 auto;
                        margin-top: 50px;
                        margin-bottom: 50px;
                    }
                }

                /*文章分享*/

                .nc-share {
                    width: 238px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    margin-top: 40px;
                    margin-bottom: 40px;

                    span {
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 2px;
                        color: #c50009;
                    }

                    .wx {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;
                        background: url("../../assets/images/news/newsinfo/share_img.png");
                        background-position: 0 0;
                    }

                    .qq {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;
                        background: url("../../assets/images/news/newsinfo/share_img.png");
                        background-position: 92px 0;
                    }

                    .wb {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        background: url("../../assets/images/news/newsinfo/share_img.png");
                        background-position: 40px 0;
                    }
                }

                /*横线*/

                .nc-hx {
                    width: 100%;
                    height: 2px;
                    background-color: #eaeaea;
                    margin-bottom: 20px;
                }

                /*热门标签*/

                .nc-hot {
                    /*标题提示*/

                    .nc-hot-title {
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 2px;
                        color: #e51919;
                        margin-bottom: 18px;
                    }

                    /*按钮*/

                    button {
                        margin-right: 21px;
                    }
                }

                /*精选文章*/
                .nc-selected{
                    margin-top: 24px;
                    /*提示标题*/
                    .nc-selected-title{
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 2px;
                        color: #c50009;
                    }
                    .nc-selected-list{
                        margin-top: 15px;
                        li{
                            font-size: 20px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 41px;
                            letter-spacing: 2px;
                            cursor: pointer;
                            color: #666;
                           &:hover{
                               color: #f90008;
                           }
                        }
                    }
                }
            }
        }
        /*移动样式*/
        @media (max-width: 992px) {
            .nc-container {
                padding-left: 30px;
                padding-right: 30px;
            }

            .newsinfo-content {
                padding: 10px 0;

                /*标题*/

                .nc-title {
                    font-size: 18px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0.1em;
                    color: #222222;
                    text-align: left;
                    line-height: 30px;
                }

                /*时间、来源等*/

                .nc-info {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 12px;
                    margin-bottom: 17px;
                    /*时间*/

                    .nc-info-time {
                        margin-right: 18px;
                    }

                    /*来源*/

                    .nc-info-from {

                    }
                }

                /*文章内容*/

                .nc-content {
                    p {
                        font-size: 16px;
                        color: #333;
                        text-align: justify;
                        letter-spacing: 0.2em;
                    }

                    img {
                        width: 100%;
                        margin-top: 15px;
                        margin-bottom: 15px;
                    }
                }

                /*文章分享*/

                .nc-share {
                    margin-top: 20px;
                    margin-bottom: 20px;

                    span {
                        font-size: 14px;
                    }

                    .wx {
                        font-size: 30px;
                        margin-right: 5px;
                    }

                    .qq {
                        font-size: 30px;
                        margin-right: 5px;
                    }

                    .wb {
                        font-size: 30px;
                    }
                }

                /*横线*/

                .nc-hx {
                    width: 100%;
                    height: 1px;
                    background-color: #eaeaea;
                    margin-bottom: 15px;
                }

                /*热门标签*/

                .nc-hot {
                    /*标题提示*/

                    .nc-hot-title {
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 2px;
                        color: #e51919;
                    }

                    /*按钮*/

                    button {
                        padding: 0 5px;
                        margin-right: 21px;
                        margin-bottom: 15px;
                        border-radius: 20px;
                    }
                }

                /*精选文章*/
                .nc-selected{
                    /*margin-top: 24px;*/
                    /*提示标题*/
                    .nc-selected-title{
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 2px;
                        color: #e51919;
                    }
                    /*文章列表*/
                    .nc-selected-list{
                        font-size: 16px;
                        color: #666;
                        li{
                            margin-bottom: 10px;
                        }
                    }
                }

            }
        }

        /*公共*/

        .newsinfo-content {
            /*height: 1178px;*/
            width: 100%;


            /*background: url("../../assets/images/news/newsinfo/content_bac.png");*/
            /*background-size: cover;*/
            /*文章标题*/

            .nc-title {

            }

            /*时间、来源等*/

            .nc-info {
                /*时间*/

                .nc-info-time {

                }

                /*来源*/

                .nc-info-from {

                }
            }

            /*热门标签*/

            .nc-hot {
                /*标题提示*/

                .nc-hot-title {

                }

                /*按钮*/

                button {
                    color: #fff;
                }
            }


        }
    }
</style>